
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

        <script language="JavaScript">
            var HttPRequest = false;
            var i = 0;
            function doCallAjax() {
                HttPRequest = false;
                if (window.XMLHttpRequest) { // Mozilla, Safari,...
                    HttPRequest = new XMLHttpRequest();
                    if (HttPRequest.overrideMimeType) {
                        HttPRequest.overrideMimeType('text/html');
                    }
                } else if (window.ActiveXObject) { // IE
                    try {
                        HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {}
                    }
                } 
		  
                if (!HttPRequest) {
                    alert('Cannot create XMLHTTP instance');
                    return false;
                }	
                var url = 'AjaxPHPChatBeta2.php';
                var pmeters = "tName=" + encodeURI( document.getElementById("txtName").value) +
                    "&tMessage=" + encodeURI( document.getElementById("txtMessage").value );

                HttPRequest.open('POST',url,true);

                HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                HttPRequest.setRequestHeader("Content-length", pmeters.length);
                HttPRequest.setRequestHeader("Connection", "close");
                HttPRequest.send(pmeters);
			
               
                HttPRequest.onreadystatechange = function()
                {

                    if(HttPRequest.readyState == 3)  // Loading Request
                    {
                        document.getElementById("mySpan").innerHTML = "Now is Loading...";
                    }

                    if(HttPRequest.readyState == 4) // Return Request
                    {			  
                        document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
					 	
                        //  focus //
                        var el = document.getElementById('mydiv');
                        el.tabIndex = 32456;
                        el.focus();
                        i++;
                        if(i == 50){
                            
                            var url="AjaxPHPChatBeta2.php"; // ไฟล์ที่ต้องการรับค้า
                            var dataSet={ i: 50 }; // กำหนดชื่อและค่าที่ต้องการส่ง
                            $.post(url,dataSet,function(data){
                                // alert("แจ้งเเมื่อทำการส่งข้อมูลเรียบร้อยแล้ว");
                            });
                            i = 0;
                        }                      
                    }                   
                }                              
            }
        </script>
    </head>
    <body Onload="JavaScript:doCallAjax()">
        <h1 style="text-align: center;">My Chat Room </h1>
        <table width="566" height="315" border="1" cellpadding="2" cellspacing="2" style="margin: auto;">
            <tr>
                <td width="575" height="291" valign="top" >
                    <div style="width:570;height:280;overflow:auto; margin: auto;"> 
                        <span id="mySpan"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td height="22" valign="top">
                    <!--form action="" method="post" name="frmMain" id="frmMain">
                        <div align="center">
                            <br>
                            Name
                            <input name="txtName" type="text" id="txtName" size="5">
                            Message
                            <input name="txtMessage" type="text" id="txtMessage" size="40">
                            <input name="btnSend" type="button" id="btnSend" value="Send" onClick="doCallAjax()">
                        </div>
                    </form-->
                    <form action="" method="post" name="frmMain" id="frmMain">
                        <div data-role="fieldcontain">
                            <label for="text-14">Name:</label>
                            <input name="txtName" type="text" id="txtName" size="5">

                        </div>
                        <div data-role="fieldcontain">
                            <label for="text-15">Message"</label>
                            <input name="txtMessage" type="text" id="txtMessage" size="40">
                        </div>
                        <div data-role="fieldcontain">

                            <input name="btnSend" type="button" id="btnSend" value="Send" onClick="doCallAjax()">
                        </div>

                    </form>
                </td>
            </tr>
        </table>

    </body>
</html>